{include file="default/pc/public/mall_header"}

<style>
	/*内容*/
	h3.kt-widget14__title {
		font-size: 16px;
		font-weight: bold;
		font-family: '微软雅黑';
	}
	.kt-portlet.kt-portlet--head-overlay .kt-portlet__body {
		margin-top: 0;
	}
	.kt-widget27 {
		height: 100%;
	}
	.kt-widget27__visual {
		width: 100%;
		height: 320px;
	}
	.kt-widget27 .kt-widget27__visual > img {
		width: 100%;
		height: 100%;
	}
	.f-l-ad {
		background-color: rgba(255, 255, 255, 0.7);
		min-height: 125px;
		margin: 5% 5%;
		border-radius: 3px;
	}

	ul.categery {
		margin-left: -23px;
	}

	li.f-l-item.pull-left.padding-none {
		margin: 5px 0 0 5px;
	}

	/*底部*/
	.kt-portlet.kt-iconbox.kt-iconbox--animate {
		width: 315px;
		height: 208px;
	}
	 .kt-iconbox__content a,span{
		color: #74788d;
	}
	.kt-portlet .kt-portlet__head {
		/*min-height: 40px;*/
	}
	.kt-portlet .kt-portlet__body.notice {
		padding: 10px;
	}
	.kt-widget4 .kt-widget4__item {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	/*顶部*/
	.kt-menu__submenu.kt-menu__submenu--classic.kt-menu__submenu--left {
		height: 300px;
		overflow: auto;
		overflow-y: auto;
	}

	.shortcut {
		height: 180px;
		border-radius: 10px;

		/*background-color: rgba(39,134,251,0.1);*/
		background-color: #FFF;
		border: 1px #e5e5e5 solid
	}
	.shortcut .nav .nav-item {
		display: table-cell;
	}
	li.nav-item {
		margin: 5px;
		width: 81px;
		height: 66px;
		font-size:20px;
	}
	.shortcut .nav .nav-item > a {
		/*padding: 1rem 0 1rem 0;*/
		/*border: 1px solid rgba(88,130,221,0.8);*/
		/*background-color: rgba(88,130,221,0.8);*/


		background-color: transparent;
		text-align: center;
		border-radius: 10px;

		border: 1px solid rgba(141,192,253,1);
		background-color: rgba(141,192,253,1);
	}
	.shortcut .nav .nav-item > a:hover {
		font-width: bold;
		border: 1px solid  #2786fb;
		background-color:  #2786fb;
		color:#FFFFFF; !important;
	}
	.shortcut .nav .nav-item > a > span {
		/*color: rgba(255, 255, 255, 0.7);*/

		display: block;
		-webkit-transition: color 0.3s ease;
		transition: color 0.3s ease;
		color:#48465b;
	}
	.shortcut .nav .nav-item > a > span:hover {
		color:#FFFFFF;
	}
	.shortcut .nav .nav-item > a > span:last-child {
		font-weight: 400;
		font-size: .8rem;
		color:#48465b;
	}
	.shortcut .nav .nav-item > a > span:last-child:hover {
		color:#FFFFFF;
		font-width:800px;
	}
	.kt-portlet__space-x {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	span.icon_direction {
		float: right;
		margin-right: 30px;
	}

	/*搜索*/
	.input-group-prepend {
		height: 40px;
	}
	input.form-control {
		height: 40px;
	}
	button.btn.btn-info.btn-flat.btn-lg {
		padding: 0.45rem 1rem;
		border-radius: 5px;
	}

</style>
{cdncss href="__THEME__/assets/css/pages/support-center/home-1.css" /}
<style>
	#kt_subheader {
		display: none;
	}
</style>
<div class="kt-content  kt-content--fit-top  kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">

	<!-- begin:: Content -->

	<!-- begin:: Hero -->
	<div class="kt-sc" style="background-image: url({cdnurl href='__THEME__/assets/media/bg/bg-8.jpg' /})">
		<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">
			<div class="row kt-margin-t-20">
				<div class="col-md-2">
					<div class="kt-portlet kt-portlet--height-fluid">
						<div class="kt-portlet__head">
							<div class="kt-portlet__head-label">
								<h3 class="kt-portlet__head-title">
									全部商品分类
								</h3>
							</div>
						</div>
						<div class="kt-portlet__body kt-margin-0 kt-padding-0">

							<!--begin::Section-->
							<ul class="kt-nav kt-nav--lg-space  kt-nav--bold  kt-nav--lg-font">
								{notempty name="category_list"}
								{volist name="category_list" id="category"}
								<li class="kt-nav__item">
									<a href="{:url('mall/category/index',['id'=>$category.id])}" class="kt-nav__link">
										<i class="kt-nav__link-icon flaticon2-drop"></i>
										<span class="kt-nav__link-text">{$category.title}</span>
										{notempty name="category.is_recommend"}
										<span class="kt-nav__link-badge">
											<span class="kt-badge kt-badge--danger kt-badge--inline kt-badge--pill kt-badge--rounded">new</span>
										</span>
										{/notempty}
									</a>
								</li>
								<div class="kt-separator kt-separator--space-sm  kt-separator--border-dashed"></div>
								{/volist}
								{/notempty}
							</ul>
						</div>
					</div>

				</div>
				<div class="col-md-7">
					<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
						<div class="carousel-inner" style="height:430px;">
							<div class="carousel-item active" data-interval="10000">
								<img src="__STATIC__/images/blog/full/1.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item" data-interval="2000">
								<img src="__STATIC__/images/blog/full/2.jpg" class="d-block w-100" alt="...">
							</div>
							<div class="carousel-item">
								<img src="__STATIC__/images/blog/full/3.jpg" class="d-block w-100" alt="...">
							</div>
						</div>
						<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
							<span class="carousel-control-prev-icon" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
							<span class="carousel-control-next-icon" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>
				<div class="col-md-3">
					<div class="kt-portlet">
						<div class="kt-portlet__head">
							<div class="kt-portlet__head-label">
								<h3 class="kt-portlet__head-title">
									<i class="flaticon2-speaker kt-font-success"></i>&emsp;商城公告
								</h3>
							</div>
							<div class="kt-portlet__head-toolbar">
								<a href="{:url('mall/news/index')}" class="btn btn-label-brand btn-bold btn-sm">
									更多
								</a>
							</div>
						</div>
						<div class="kt-portlet__body notice">

							<!--begin::widget 12-->
							<div class="kt-widget4">
								{notempty name="news_list"}
								{volist name="news_list" id="news"}
								<div class="kt-widget4__item">
									<a href="{:url('mall/news/detail',['id'=>$news['id']])}" class="kt-widget4__title kt-widget4__title--light">
										{$news.title}
									</a>
									<span class="kt-widget4__number"><i class="fa fa-angle-double-right"></i></span>
								</div>
								{/volist}
								{/notempty}
							</div>

							<!--end::Widget 12-->
						</div>
					</div>
					<div class="row kt-margin-t-10">
						<div class="col-md-6">
							<div class="kt-portlet kt-iconbox kt-iconbox--brand kt-padding-0">
								<div class="kt-portlet__body kt-padding-10">
									<button type="button" class="btn btn-primary btn-lg">积分任务</button>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="kt-portlet kt-iconbox kt-iconbox--brand kt-padding-0">
								<div class="kt-portlet__body kt-padding-10">
									<button type="button" class="btn btn-primary btn-lg">积分兑换</button>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="kt-portlet kt-iconbox kt-iconbox--brand kt-padding-0">
								<div class="kt-portlet__body kt-padding-10">
									<button type="button" class="btn btn-primary btn-lg">帮助中心</button>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="kt-portlet kt-iconbox kt-iconbox--brand kt-padding-0">
								<div class="kt-portlet__body kt-padding-10">
									<button type="button" class="btn btn-primary btn-lg">在线客服</button>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- end:: Hero -->


</div>
<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">


	<!--内容-->
	<div class="kt-portlet ">
			<div class="kt-portlet__head">
				<div class="kt-portlet__head-label">
					<h3 class="kt-portlet__head-title">
						<h3 class="kt-widget14__title kt-font-bold" >
							精品推荐
						</h3>
					</h3>
				</div>
			</div>

			<div class="row">
				<div class="col-md-12">
					<div class="row">
						{notempty name="goods_list"}
						{volist name="goods_list" id="goods" length="4"}
						<div class="col-md-3">
							<div class="kt-portlet kt-portlet--height-fluid">
								<div class="kt-portlet__head kt-portlet__head--noborder">
									<div class="kt-portlet__head-label">
										<h3 class="kt-portlet__head-title">
										</h3>
									</div>
									<div class="kt-portlet__head-toolbar">
										{$goods.is_new ?='<span class="kt-badge kt-badge--danger kt-badge--inline">新品</span>'}
									</div>
								</div>
								<div class="kt-portlet__body kt-portlet__body--fit-y">

									<!--begin::Widget -->
									<div class="kt-widget kt-widget--user-profile-4">
										<div class="kt-widget__head">
											<div class="kt-widget__media">
												<!--<a href="{//:url('mall/goods/index',['id'=>$goods.id])}"><img class="kt-widget__img" src="{//$goods.cover_id|thumb=250,188}" alt="image"></a>-->
												<a href="{:url('mall/goods/index',['id'=>$goods.id])}"><img class="kt-widget__img" src="{$goods.cover_id ? thumb($goods.cover_id,250,188): '__STATIC__/images/shop/banners/2.jpg' }" alt="image"></a>
											</div>
											<div class="kt-widget__content">
												<div class="kt-widget__section kt-padding-b-10">
													<a href="{:url('mall/goods/index',['id'=>$goods->id])}" class="kt-widget__username">
														{$goods.title}
													</a>
													<div class="kt-widget__button">
														<span class="kt-badge kt-badge--dark kt-badge--inline">{$goods.price|intval}积分</span>
													</div>
													<div class="kt-widget__action">
														<a href="{:url('mall/api.bookmark/add',['id'=>$goods->id])}" class="btn btn-primary btn-sm ajax-post ajax-get"><i class="fa fa-bookmark"></i> 收藏</a>
														<a href="{:url('mall/api.goods/buy',['id'=>$goods->id])}" class="btn btn-success btn-sm ajax-post ajax-get"><i class="fa fa-cart-plus"></i> 购买</a>
													</div>
												</div>
											</div>
										</div>
									</div>

									<!--end::Widget -->
								</div>
							</div>
						</div>

						{/volist}
						{else /}
						<span>暂时没有数据</span>
						{/notempty}

					</div>
				</div>
			</div>
	</div>
	{notempty name="category_list"}
	{volist name="category_list" id="category" key="p"}
	<div class="kt-portlet">
		<div class="kt-portlet__head">
			<div class="kt-portlet__head-label">
				<h3 class="kt-portlet__head-title">
					<div class="kt-badge kt-badge--xl kt-badge--brand kt-margin-r-10" style="width:40px; height:40px;">{$p}F</div>
					<h3 class="kt-widget14__title kt-font-bold">
						{$category.title}
					</h3>
				</h3>
			</div>
		</div>

		<div class="row">
			<div class="col-md-3">
				<div class="kt-portlet kt-portlet--fit kt-portlet--head-lg kt-portlet--head-overlay kt-portlet--height-fluid">
					<div class="kt-portlet__body kt-margin-t-0">
						<div class="kt-widget27" height="calc(100%)" style="background-color: rgba(233, 246, 255, 1);">
							<div class="f-l-ad">
								<div class=" row kt-padding-20">
									{notempty name="category.children"}
									{volist name="category.children" id="item"}
									<div class="col-md-6 kt-align-center ">
										<a href="{:url('mall/category/index',['id'=>$item['id']])}" class="btn btn-primary btn-lg">{$item.title}</a>
									</div>
									{/volist}
									{/notempty}
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="row">
					{notempty name="goods_floor_one"}
					{volist name="goods_floor_one" id="goods" length="3"}
					<div class="col-md-4">
						<div class="kt-portlet kt-portlet--height-fluid">
							<div class="kt-portlet__head kt-portlet__head--noborder">
								<div class="kt-portlet__head-label">
									<h3 class="kt-portlet__head-title">
									</h3>
								</div>
								<div class="kt-portlet__head-toolbar">
									{$goods.is_new ?='<span class="kt-badge kt-badge--danger kt-badge--inline">新品</span>'}
								</div>
							</div>
							<div class="kt-portlet__body kt-portlet__body--fit-y">

								<!--begin::Widget -->
								<div class="kt-widget kt-widget--user-profile-4">
									<div class="kt-widget__head">
										<div class="kt-widget__media">
											<a href="{:url('mall/goods/index',['id'=>$goods.id])}"><img class="kt-widget__img" src="{$goods.cover_id ? thumb($goods.cover_id,250,188): '__STATIC__/images/shop/banners/3.jpg' }" alt="image"></a>
										</div>
										<div class="kt-widget__content">
											<div class="kt-widget__section kt-padding-b-10">
												<a href="{:url('mall/goods/index',['id'=>$goods->id])}" class="kt-widget__username">
													{$goods.title}
												</a>
												<div class="kt-widget__button">
													<span class="kt-badge kt-badge--dark kt-badge--inline">{$goods.price|intval}积分</span>
												</div>
												<div class="kt-widget__action">
													<a href="{:url('mall/api.bookmark/add',['id'=>$goods->id])}" class="btn btn-primary btn-sm ajax-post ajax-get"><i class="fa fa-bookmark"></i> 收藏</a>
													<a href="{:url('mall/api.goods/buy',['id'=>$goods->id])}" class="btn btn-success btn-sm ajax-post ajax-get "><i class="fa fa-cart-plus"></i> 购买</a>
												</div>
											</div>
										</div>
									</div>
								</div>

								<!--end::Widget -->
							</div>
						</div>
					</div>
					{/volist}
					{else /}
					<span>暂时没有数据</span>
					{/notempty}
				</div>
			</div>
		</div>
	</div>
	{/volist}
	{/notempty}


</div>